<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>marquee</title>
  <script src="http://cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>
  <style type="text/css">
    .marquee {
        width: 450px;
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
    }
    .marquee ul {
        display: inline-block;
        padding: 0;
        /*padding-left: 100%; */ 
        /*animation: marquee 5s linear infinite;*/
    }
    .marquee .mar-wrap{
      position: relative;
    }
    /*.marquee ul:hover {
        animation-play-state: paused
    }*/
    .ani-pause{
      animation-play-state: paused
    }
    .marquee ul li{
      display: inline-block;
    }
    /* Make it move */
    @keyframes marquee {
      0%   { transform: translate(0, 0); }
      100% { transform: translate(-100%, 0);}
    }
  </style>
</head>
<body>

  <div class="microsoft marquee">
    <div class="mar-wrap">
      <ul class="u1">
        <li>1qwrtewrtewrtet</li>
        <li>2qwrtewrtewrtet</li>
        <li>3qwrtewrtewrtet</li>
        <li>4qwrtewrtewrtet</li>
      </ul>
    </div>
  </div>

</body>
<script type="text/javascript">
  $.fn.marquee = function(options){
    function init(){

    }
    function start(){

    }
    function stop(){

    }
  }
  // $(function(){
    var $ul = $('.marquee ul').first();
    $ul.clone().insertAfter($ul);

    var distance = $ul.width();
    var speed = distance/110;// 110px/s
    var originalLeft = $('.marquee .mar-wrap').position().left;
    var restDs = ds;

    function marqueeAni(){
      $('.marquee .mar-wrap').animate({
        'left': -distance
      }, speed*1000, "linear", function() {
          $(this).css({ 'left': 0});
          marqueeAni();
      });
    }

    marqueeAni();

    function stopmarquee(){
      $('.marquee .mar-wrap').stop();

      restDs = (distance - originalLeft + $('.marquee .mar-wrap').position().left ) ;
    }

    function startmarquee(){
      if(restDs === distance){ return; }

      var s2 = restDs/110;
      $('.marquee .mar-wrap').animate({
        'left': -distance
      }, s2*1000, "linear", function() {
          $(this).css({ 'left': 0});
          restDs = distance;
          marqueeAni();
      });
    }


  // });
</script>
</html>